<!-- 拓扑图 -->
<template>
  <div>
    <a-modal
      :title="$t('Topology-graph')"
      v-model="modalVisible"
      width='65%'
      @cancel="handleCancel"
      :maskClosable="false"
      v-dragModal
    >
    <!-- @ok='handleCancel' -->
      <a-spin :spinning="dataLoading">
      <div class="modal-content-box">
        <template v-for="(i,index) in topologyData">
          <!-- 箭头 -->
          <div class="arrow-box" v-if="index == 1 || index == 3" :key="index">
            <div>
              <!-- <i class="icon icon-client32f arrow-icon"></i> -->
              <Iconfont class="icon arrow-icon" type="icon-client32f"></Iconfont>
            </div>
            <div class="reverse-box">
              <!-- <i class="icon icon-client32f arrow-icon"></i> -->
              <Iconfont class="icon arrow-icon" type="icon-client32f"></Iconfont>
            </div>
          </div>
          <!-- 信息盒子 -->
          <div v-else class="card-box" :key="index+0">
            <div>
              <span class="card-title">
                {{$store.state.language=='zh' ? i.ch_head_title : i.en_head_title}}
              </span>
              <span class="card-value">{{i.head_value}}</span>
            </div>
            <div class="card-item-box">
              <a-popover
                v-for="(child,index2) in i.children" :key="index2"
                :title="popTitle[i.type]"
                placement="topLeft"
              >
                <template slot="content">
                  <div v-if="i.type === 'client'">
                    <!-- Target名 注释 {{$t('Client-name')}}-->
                    <div class="popover-item-title">
                      Target: {{ child.info.value }}
                    </div>
                    <!-- 状态 注释
                    <div class="popover-item-title">
                      {{$t('Status')}}: 
                      <span v-if="child.info.status"><span class="green-circle"></span>{{$t('Connected')}}</span>
                      <span v-else><span class="red-circle"></span>{{$t('Not-connected')}}</span>
                    </div>
                    <div class="popover-item-title">
                      {{$t('IP_address')}}: {{ child.info.ipaddr.length !==0 ? child.info.ipaddr.join(',') : '-'}}
                    </div> -->
                  </div>
                  <div v-else-if="i.type === 'gateway'">
                    <!-- 节点名 -->
                    <div class="popover-item-title">
                      {{$t('Node-name')}}: {{ child.info.hostname }}
                    </div>
                    <!-- 管理网IP -->
                    <div class="popover-item-title">
                      {{$t('Manage-net-ip')}}:
                      <span v-for="(ip,index) in child.info.manager" :key="'manageIp'+index">
                        {{ index === child.info.manager.length-1 ? ip.address : ip.address+','}}
                      </span>
                    </div>
                    <div class="popover-item-title">
                      {{$t('Status')}}: 
                      <span v-if="child.info.status"><span class="green-circle"></span>{{$t('Normal')}}</span>
                      <span v-else><span class="red-circle"></span>{{$t('Abnormal')}}</span>
                    </div>
                    <div class="popover-item-title">
                      {{$t('IP_address')}}: {{ child.info.ip_addr }}
                    </div>
                  </div>
                  <div v-else-if="i.type === 'LUN'">
                    <!-- 块名 -->
                    <div class="popover-item-title">
                      {{$t('Block-name3')}}: {{ child.info.block_name }}
                    </div>
                    <div class="popover-item-title">
                      {{$t('Own-pool')}}: {{ child.info.pool_name }}
                    </div>
                    <div class="popover-item-title">
                      {{$t('Size')}}: {{ child.info.block_size }}
                    </div>
                    <div class="popover-item-title">
                      feature: {{ child.info.block_feature.length===0 ? '-' : child.info.block_feature.join(',') }}
                    </div>
                  </div>
                </template>
                <div class="card-item">
                  <div class="card-item-title">
                    {{$store.state.language=='zh' ? child.ch_item_title : child.en_item_title}}
                  </div>
                  <div class="card-item-value">{{child.info.value}}</div>
                  <div class="bg-icon">
                    <!-- <i :class="i.bg_icon"></i> -->
                    <Iconfont class="icon" :type="i.bg_icon"></Iconfont>
                  </div>
                </div>
              </a-popover>
            </div>
          </div>
        </template>
      </div>
      </a-spin>
      <template slot="footer">
        <a-button
          type="primary"
          @click="handleCancel"
        >
          {{$t('Close')}}
        </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: "TopologyGraph",
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    targetClient: {
      type: Object,
      required: true,
      default: () => { return {} }
    }
  },

  data() {
    return {
      modalVisible: false,
      topologyData: [
        {
          type: 'client',
          ch_head_title: 'Target个数：', 
          en_head_title: 'Number of target:',
          head_value: 0,
          bg_icon: 'icon-client48f',
          children: [
            // { ch_item_title: '客户端名：', en_item_title: 'Client Name:', info:{ value: 1111111, } },
          ]
        },
        {},
        {
          type: 'gateway',
          ch_head_title: '网关服务器个数：', 
          en_head_title: 'Number of gateway servers:',
          head_value: 0,
          bg_icon: 'icon-gateway48f',
          children: [
            // { ch_item_title: '网关服务器名：', en_item_title: 'Gateway Server Name:', info:{ value: 1111111, } }
          ]
        },
        {},
        {
          type: 'LUN',
          ch_head_title: 'LUN块个数：', 
          en_head_title: 'Number of LUN blocks:',
          head_value: 0,
          bg_icon: 'icon-pool48f',
          children: [
            // { ch_item_title: 'LUN块名：', en_item_title: 'LUN Block Name:', info:{ value: 1111111, } }
          ]
        }
      ],
      popTitle: {
        client: this.$t('Target-detail'),//客户端详情
        gateway: this.$t('Gateway-server-detail'),//网关服务器详情
        LUN: this.$t('LUN-block-detail')//LUN块详情
      },
      dataLoading: false,
    }
  },

  watch: {
    visible(newValue) {
      // console.log(this.targetClient)
      if(newValue) {
        this.topologyData[0].children = [];
        this.topologyData[2].children = [];
        this.topologyData[4].children = [];
        this.topologyData[0].head_value = 0;
        this.topologyData[2].head_value = 0;
        this.topologyData[4].head_value = 0;
        this.getTopologyData(this.targetClient);
      }
      this.modalVisible = newValue;
    },
    "$store.state.language"() {
      this.popTitle = {
        client: this.$t('Target-detail'),
        gateway: this.$t('Gateway-server-detail'),
        LUN: this.$t('LUN-block-detail')
      }
    },
  },

  methods: {
    // 获取拓扑图数据
		async getTopologyData({name}) {
      this.dataLoading = true;
			const res = await this.$api.iscsi.getTopologyByTarget({target: name});
      // console.log('客户端拓扑图数据', res)
      if(res && res.data) {
        let clientInfo = [];
        let gatewayInfo = [];
        let lunInfo = [];
        // 客户端
        clientInfo.push({
          ch_item_title: 'Target名：', 
          en_item_title: 'Target Name:',
          info: { value:res.data.target_name }
        })
        this.topologyData[0].children = [...clientInfo];
        this.topologyData[0].head_value = 1;
        // 网关信息
        res.data.iscsi_gateway.forEach(item => {
          gatewayInfo.push({
            ch_item_title: '网关服务器名：',
            en_item_title: 'Gateway Server Name:',
            info: { value:item.hostname , ...item }
          })
        })
        this.topologyData[2].head_value = res.data.iscsi_gateway.length;
        this.topologyData[2].children = [...gatewayInfo];
        // lun信息
        res.data.luns_info.forEach(item => {
          lunInfo.push({
            ch_item_title: 'LUN块名：',
            en_item_title: 'LUN Block Name:',
            info: { value:item.block_name , ...item }
          })
        })
        this.topologyData[4].head_value = res.data.luns_info.length;
        this.topologyData[4].children = [...lunInfo];
      }
      this.dataLoading = false;
		},
    
    //关闭拓扑图
    handleCancel() {
      // this.modalVisible = false;
      this.$emit('closeTopologyModal', 'close-topology');
    },

  },
}
</script>
<style scoped>
  .modal-content-box {
    display: inline-block;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .modal-content-box > div {
    position: relative;
  }
  .card-box {
    display: inline-block;
    background-color: var(--mainGreyColor);
    /* width: 250px; */
    height: 400px;
    padding: 15px;
    box-sizing: border-box;
    flex: 1;
  }
  .card-box div:nth-child(1) {
    margin-bottom: 10px;
  }
  .card-title {
    position: relative;
    font-size: 14px;
    font-weight: 700;
    color: #333;
  }
  .card-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--mainGreenColor);
  }
  .card-item-box {
    overflow: auto;
    height: calc(400px - 31px - 30px);
    overflow-y: hidden;
  }
  .card-item-box:hover {
    overflow-y: auto;
  }
  .card-item {
    position: relative;
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    background-color: #fff;
    margin-bottom: 20px;
  }
  .card-item-title {
    font-size: 14px;
    color: #666;
  }
  .card-item-value {
    /* width: 75%; */
    width: 150px;
    font-size: 16px;
    color: #333;
    font-weight: 700;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .bg-icon {
    position: absolute;
    right: 10px;
    bottom: -14px;
  }
  .bg-icon > i {
    font-size: 48px;
    color: var(--mainGreyColor);
  }
  .arrow-box {
    /* width: 32px; */
    margin: 0 20px;
  }
  .arrow-icon {
    font-size: 32px;
    color: var(--mainGreenColor);
  }
  .reverse-box {
    transform: rotate(180deg);
  }

  .popover-item-title {
    margin-bottom: 5px;
  }

</style>